<template>
	<view class="player" @click="goMusic">
		<view class="detail">
			<image :src="detail.al.picUrl+'?param=40y40'" mode="aspectFit"
				:style="paused?'animation-play-state:running;':'animation-play-state:paused;'">
			</image>
			<view>
				<text class=" name">{{detail.name}}</text>
				<text class="artists"> - {{artistsName}}</text>
			</view>
		</view>

		<view class="list">
			<view @click.stop="switchover">
				<uni-icons custom-prefix="iconfont" :type="paused ? 'icon-stop1' : 'icon-playcircle'"></uni-icons>
			</view>
			<view @click.stop="open">
				<uni-icons type="list"></uni-icons>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<playing></playing>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters
	} from 'vuex' //引入mapState
	export default {
		name: "player",
		data() {
			return {

			};
		},
		computed: {
			...mapState(['detail', 'paused']),
			...mapGetters(['artistsName'])
		},
		methods: {
			...mapMutations(['play', 'pause']),
			switchover() {
				// console.log(this.paused);
				if (this.paused) {
					this.pause()
				} else {
					this.play()
				}
			},
			open() {
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
			goMusic() {
				uni.navigateTo({
					url: '/pages/music/music'
				})
			}
		},
		created() {

		}
	}
</script>

<style lang="scss">
	.player {
		display: flex;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		height: 100rpx;
		width: 100%;
		border-top: 1px solid $uni-border-1;
		background-color: #fff;
		z-index: 998;

		.detail {
			margin-left: 20rpx;
			display: flex;
			align-items: center;
			// flex-wrap: nowrap;

			image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				background-color: black;
				animation: rotate 5s linear infinite;
			}

			view {
				margin-left: 20rpx;
				width: 420rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				color: #999;

				// white-space: nowrap;
				text {
					white-space: nowrap;
				}


			}
		}

		.list {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 120rpx;
			margin-right: 20rpx;
		}
	}

	.name {
		font-size: 28rpx;
		color: #3b4144;
	}

	.artists {
		font-size: 24rpx;
		color: #999;
	}
</style>
